<!---总览数据页面-->
<template>
  <div class="ele-body ele-body-card">
    <a-row>
      <a-col :span="12" class="block-space-right">
        <a-card title="设备信息" class="card-width">
          <a-descriptions bordered :column="1">
            <a-descriptions-item label="牧场名称">{{data.oxtallName}}</a-descriptions-item>
            <a-descriptions-item label="设备ID">{{data.recordId}}</a-descriptions-item>
            <a-descriptions-item label="设备号">{{data.recordNo}}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :span="12" class="block-space-right">
        <!-- 右边统计快 -->
        <a-card title="实时数据" class="card-width">
          <a-row :gutter="8">
            <a-col :span="12">
              <a-card>
                <a-statistic
                  title="当前经度"
                  :value="positionfoot.longitude"
                  :precision="7"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card>
                <a-statistic
                  title="当前纬度"
                  :value="positionfoot.latitude"
                  :precision="7"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
          </a-row>
          <a-row :gutter="8">
            <a-col :span="12">
              <a-card>
                <a-statistic
                  title="运动量"
                  :value="positionfoot.step"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6" />
            <a-col :span="6" />
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import 'echarts-wordcloud';
import {DeviceFootpositionApi} from "@/api/property/cattlesports/DeviceFootpositionApi";

export default {
  name: 'DeviceCattlesportPositionFootMonitor',
  components: {
  },
  props: {
    data: Object
  },
  data() {
    return {
      positionfoot : {},
      loadDetailTimer : null,
    };
  },
  mounted() {
    this.getDetail();
    this.loadDetailTimer = setInterval(this.getDetail, 30000);
  },
  beforeUnmount() {
    clearInterval(this.loadDetailTimer);
  },
  methods: {
    getDetail() {
      let that = this;
      DeviceFootpositionApi.detailByRecord(this.data.recordId).then(result => {
        that.positionfoot = result || {};
      });
    },
  }
};
</script>
<style scoped>
.block-space-top {
  /*上右下左*/
  padding: 10px 0 0 0;
}

.block-space-right {
  padding: 0 5px 0 0;
}

.block-space-left {
  padding: 0 0 0 5px;
}

.card-width {
  width: 100%;
}
@media screen and (max-width: 880px) {
  .analysis-tabs-extra {
    display: none;
  }
}
</style>
